//这个 main.js 是项目的JS入口文件

//1.导入 Jquery
// import ** from **   //是ES6中导入模块的方式
// 由于 ES6的代码太高级了，浏览器解析不了，所以这一行代码执行报错
import $ from 'jquery'


//使用 import 语法 导入css样式
import '../css/index.css'
import '../css/index.less'
import '../css/index.scss'

import "bootstrap-icons/font/bootstrap-icons.css"

//在webpack中尝试使用vue： (  安装 vue2命令：  `npm i vue@2 -S`)
//注意： 在 webpack中 通过 import Vue from 'vue' 导入的Vue构造函数，功能不完整，只提供了 runtime-only的方式，不同于 在html网页中手动导入vue的方式。
import Vue from 'vue'
// import Vue from '../node_modules/vue/dist/vue.js' //这种 手动导入方式也可实现vue的html方式导入。
/**
 *  Vue包的查找规则：
 * 1.在项目根目录中有没有 node_modules文件夹
 * 2.在 node_modules中根据包名找到对应的 vue的文件夹
 * 3.在vue文件中，找到一个 package.json的包配置文件
 * 4.在package.json文件中，查找一个 main属性【main 属性指定了这个包在被加载时的入口文件】
 * 
 */

// 总结梳理 : webpack 中如何使用 vue
// 1. 安装vue的包: `npm i vue -s`
// 2.由于 在 wepack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装能解析这种文件的 loader `npm i vue-loader vue-template-complier -D`
// 3.在 main.js 中，导入 vue 模块 `import Vue from 'vue'`
// 4.定义一个 vue 结尾的组件，其中，组件有三部分组成 : template script style
// 5. 使用 import login from  ./login.vue' 导入这个组件
// 6.创建 vm 的实例 var vm = new Vue( el:'#app'，render: c => c(login) })
// 7.在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域 .


// webpack使用vue： 自定义组件
// var login = {
//     template: '<h1>这是自定义login组件</h1>',
// }

//webpack导入.vue文件
//webpack默认无法处理.vue文件，需要安装合适的loader：`npm i vue-loader@15 vue-template-compiler -D`    // webpack5 : vue-loader使用15.10.1版本，以上版本有问题。
import login  from "./login.vue";



var vm = new Vue({
    el: '#app',
    data: {
        msg: "123"
    },
    methods: {},
    // components: {
    //     login
    // },

    // render: function (createElement) { //使用redner函数可以将 组件login 渲染到 #app指定标签内。
    //     return createElement(login)
    // }
    render: c => c(login) //上面简写

})


// mark: webpack 默认只能打包处理JS类型的文件，无法处理其他的非JS类型的文件；
// 如果要处理 非JS类型的文件，需要手动安装一些 合适 的 第三方 loader加载器；
// 1.如果要打包处理 css文件，需要安装 `npm i style-loader css-loader -D`
// 1.如果要打包处理 less文件，需要安装 `npm i style-loader css-loader less-loader -D`
// 1.如果要打包处理 scss文件，需要安装 `npm i sass-loader node-sass -D`
// 2.在webpack.config.js这个配置文件中，新增一个节点：module，它是一个对象，它有一个 rules 数组属性，这个数组中存放了所有第三方文件的处理规则；


// mark：webpack处理第三方文件类型的过程：
// 1.发现这个要处理的文件不是JS文件，然后就去webpack.config.js配置文件中查找有没有对应的第三方loader规则
// 2.如果能找到对应的规则，就会调用对应的loader处理这种文件类型；
// 3.在调用loader时，是从后往前调用；
// 4.当最后一个loader调用完毕，会把处理的结果直接交给webpack进行打包合并，最终输出到bundle.js中去。




//2.利用JQuery实现奇偶行背景颜色
$(function () {
    $('li:odd').css('backgroundColor', 'blue')
    $('li:even').css('backgroundColor', function () {
        return "#" + 'D89763'
    })
})









// export default 和 export使用方式

import  mm, {title, content as cnt}  from "./export_default&export使用方式.js";
console.log(mm)
console.log(title + " --- " + cnt)


